<template>
  <div class="footer">
    <div class="banxin">
      <div class="top">
        <div class="leftBox">
          <p class="title">客服电话</p>
          <p class="number">400-108-9858</p>
          <p class="time">09:00-23:00</p>
          <!-- <div class="consult">咨询客服</div> -->
        </div>
        <div class="centerBox">
          <p class="title">关注优易捷</p>
          <p>专注于客单价，转化率提升！</p>
          <p>便捷高效，助力各大商家提升客单价，</p>
          <p>客户引导，提高复购，</p>
          <p>只为更好的服务每一位用户。</p>
        </div>
        <div class="rightBox">
          <div class="aboutUs">
            <p class="title"></p>
            <!-- <p class="title">关于我们</p> -->

            <el-popover placement="right" title="公司简介" width="300" trigger="click">
              <!-- <el-button slot="reference">click 激活</el-button> -->
              <p style="font-size:14px">北京优易捷科技有限责任公司，致力于为中国企业提供高品质的互联网解决方案服务。全国21家分公司，服务能力覆盖全国。服务涵盖：APP软件开发、网站建设、电商平台搭建、大数据平台搭建、以及行业解决方案服务；并拥有多个国家版权局认证的软件著作专利。 北京优易捷科技的互联网+方案涉及：视频直播、商城、教育、智能硬件、智能家居、智能社区、移动办公、新闻、物流、社交、汽车、旅游、酒店宾馆、金融、婚庆、餐饮、房地产、服装、通信、建材、母婴、医疗、生鲜等多行业领域。
              </p>
              <p class="cur-poi" slot="reference">了解我们</p>
              <!-- <p class="cur-poi" @click="usKnow">了解我们</p> -->
            </el-popover>
            <!-- <p class="cur-poi">合作咨询</p> -->
            <el-popover placement="right" title="客服电话：" width="300" trigger="click">
              <!-- <el-button slot="reference">click 激活</el-button> -->
              <div style="font-size:14px;min-height:100px;">
                <!-- 400-108-9858 -->
                <!-- <p class="title">客服电话</p> -->
                <p class="number">400-108-9858</p>
              </div>
              <p class="cur-poi" slot="reference">联系我们</p>

              <!-- <p class="cur-poi" slot="reference">了解我们</p> -->
              <!-- <p class="cur-poi" @click="usKnow">了解我们</p> -->
            </el-popover>
          </div>
          <div class="qrCode">
            <div class="drawer_show_box">
              <transition name="el-zoom-in-top">
                <div v-show="drawerShow" class="transition-box">
                  <div class="drawer_show_box_chi">
                    <h2>公司简介</h2>

                  </div>
                </div>
              </transition>
            </div>

            <p class="title"></p>
            <img src="https://vpigshop.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230428105921.jpg" alt="">
          </div>

        </div>
      </div>
      <!-- <p class="bottom">&copy;2017-2021CERESHOP版权所有，并保留所有权利 粤ICP备19086489号-3</p> -->
      <div class="bottom_box">
        <div>

          Copyright C 20202025 All Rights Reserved 版权所有 北京优易捷科技有限责任公司 <a target="_blank" href="https://beian.miit.gov.cn">京ICP备 18024001号</a>
        </div>
        <div>
          <!-- 7号楼 -->
          地址: 北京市房山区良乡凯旋大街建设路18号-E719 EMAIL: youejoy@126.com
        </div>
        <div>
          Powered by PHPYun.
        </div>
      </div>
    </div>

  </div>

</template>
<script>
export default {
  components: {
    // KinesisContainer,
    // KinesisElement
  },
  data() {
    return {
      drawerShow: false
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    usKnow() {
      this.drawerShow = !this.drawerShow
    }
  }
}
</script>
<style lang = "scss" scoped>
.footer {
  width: 100%;
  position: relative;
  /* height: 384px; */
  background-color: #252525;
  /* opacity: 0.82; */
  color: #ffffff;
  overflow: hidden;
  .banxin {
    width: 1252px;
    height: 100%;
    margin: 0 auto;
    .top {
      margin-top: 80px;
      display: flex;
      margin-bottom: 38px;
      text-align: center;
      .leftBox {
        flex: 1;
        display: flex;
        flex-direction: column;
        .title {
          font-size: 16px;
          margin-bottom: 33px;
        }
        .number {
          font-size: 40px;
          margin-bottom: 12px;
          font-weight: 500;
        }
        .time {
          font-size: 18px;
          margin-bottom: 33px;
        }
        .consult {
          cursor: pointer;
          margin: 0 auto;
          width: 220px;
          height: 36px;
          line-height: 36px;
          border: 1px solid #ffffff;
          box-sizing: border-box;
          opacity: 0.6;
        }
      }
      .centerBox {
        flex: 1;
        border-left: 2px solid rgba($color: #ffffff, $alpha: 0.15);
        border-right: 2px solid rgba($color: #ffffff, $alpha: 0.15);
        p {
          font-size: 16px;
          line-height: 25px;
        }
        .title {
          margin-bottom: 33px;
        }
      }
      .rightBox {
        flex: 1;
        display: flex;
        .aboutUs {
          flex: 1;
          p {
            margin-bottom: 20px;
          }
          .title {
            margin-bottom: 33px;
          }
        }
        .qrCode {
          /* background-color: #fff; */
          flex: 1;
          .title {
            margin-bottom: 33px;
          }
          img {
            width: 106px;
            height: 106px;
          }
        }
      }
    }
    .bottom_box {
      text-align: center;
      font-size: 12px;
      line-height: 24px;
      color: #444444;
      padding-bottom: 10px;
    }
  }
}
.drawer_show_box {
  position: absolute;
  top: 0;
  right: 0;
  /* right: 600px; */
}
.drawer_show_box_chi {
  width: 400px;
  height: 400px;
  background-color: #252525;
}
</style>
